<script setup>
import { ref } from 'vue'
import { addField } from '@/api/equipment/fields'
import { ElMessage } from 'element-plus';
const props = defineProps({
  type: String,
})
const emit = defineEmits('refeshFieldList')
const newField = ref('')
const addFieldVisiable = ref(false)
function openDialog() {
  addFieldVisiable.value = true
}
async function submit() {
  console.log(props.type)
  await addField(newField.value, props.type).then(res => {
    if (res.data.success) {
      ElMessage.success(res.data.data)
      newField.value = ''
      addFieldVisiable.value = false
      emit('refeshFieldList')
    } else {
      ElMessage.error(res.data.data)
    }
  })
}
function cancel() {
  // await addField(newField.value, props.type).then(res => {
  //   if (res.data.success) {
  //     ElMessage.success(res.data.data)
  //     addFieldVisiable.value = false
  //   } else {
  //     ElMessage.warning(res.data.data)
  //   }
  // })
  ElMessage.info("新增字段取消")
  newField.value = ''
  addFieldVisiable.value = false
}
</script>

<template>
  <div class="addcard" @click="openDialog">
    <div class="content">
      <el-icon style="vertical-align: middle">
        <Plus />
      </el-icon>
      <el-text style="font-size: 20px; margin-left: 10px;">新增</el-text>
    </div>
  </div>
  <el-dialog v-model="addFieldVisiable" width="30%" plain title="新增字段" align-center>
    <el-input v-model="newField">
      <template #prepend>
        新增字段名称：
      </template>
    </el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="default" @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>

    </template>
  </el-dialog>
</template>

<style scoped lang="less">
.addcard {
  width: 180px;
  height: 70px;
  padding: 10px 20px;
  border: grey 1px solid;
  border-radius: 10px;
  background-color: var(--el-border-color-extra-light);
  line-height: 70px;
  cursor: pointer;

  .content {
    width: 70px;
    height: 70px;
    line-height: 70px;
    margin: 0 auto;
    font-size: 20px;
  }

}
</style>